<template>
  <div class="map">
    <!-- <div class="map-header">
      <div class="con">
        <div class="back">
          <span class="iconfont icon-icon_zuo ico"></span>
          <span @click="back">返回</span>
        </div>
        <div class="bufan">不凡</div>
      </div>
    </div> -->
    <header-tm></header-tm>
    <div class="search">
      <input type="text" placeholder="搜索" class="text" v-model="searchVal" />
    </div>
    <ul class="search-list">
      <li
        class="serach-item"
        v-for="el in list"
        :key="el.uid"
        @click="goHome(el)"
      >
        {{ el.title }}
      </li>
    </ul>
    <div class="map-title">显示当前位置:</div>
    <div id="allmap"></div>
  </div>
</template>
<script>
import Head from '../components/Header'
import { mapMutations,mapState } from "vuex";
import Header from '../components/Header.vue';
export default {
  data() {
    return {
      searchVal: "",
      map: "",
      list: [],
    };
  },
  computed: {
    ...mapState(['cityInfo'])
  },
  components: {
    "header-tm":Head
  },
  methods: {
    ...mapMutations(["addCity"]),
    init() {
      // 百度地图API功能
      var map = new BMap.Map("allmap"); // 创建Map实例
      if (this.cityInfo.city) {
        map.centerAndZoom(new BMap.Point(this.cityInfo.point.lng,this.cityInfo.point.lat), 11);
        var mk = new BMap.Marker(this.cityInfo.point);
            map.addOverlay(mk);
            map.panTo(this.cityInfo.point);
      } else {
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
      }
      this.map = map;
    },
    goHome(item) {
      console.log(item);
      this.addCity(item);
      this.$router.push("/");
    },
  },
  watch: {
    searchVal() {
      var _this = this;
      var options = {
        onSearchComplete: function(results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results);
            _this.list = results.Hr;
            // var s = [];
            // for (var i = 0; i < results.getCurrentNumPois(); i ++){
            // 	s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
            // }
            // document.getElementById("r-result").innerHTML = s.join("<br/>");
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.searchVal);
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.map {
  background-color: #fff;
}
// 头部
// .map-header {
//   height: 60px;
//   color: #b4282d;
//   font-size: 16px;
//   .con {
//     position: relative;
//     top: 50%;
//     transform: translateY(-50%);
//     overflow: hidden;
//     .back {
//       float: left;
//       margin-left: 15px;
//       .ico {
//         font-size: 18px;
//         font-weight: 700;
//         line-height: 22px;
//       }
//     }
//     .bufan {
//       float: left;
//       position: absolute;
//       left: 50%;
//       transform: translateX(-50%);
//     }
//   }
// }
// 搜索
.search {
  position: relative;
  height: 48px;
  width: 340px;
  border: 2px solid #c3c3c3;
  border-radius: 6px;
  margin: 5px auto;
  font-size: 14px;
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 26px;
    padding: 0;
    border: 0;
  }
  .text::placeholder {
    /* WebKit browsers */
    color: #ccc;
    font-size: 14px;
  }
}
// 搜索列表
.search-list {
  width: 100%;
  height: 310px;
  overflow: auto;
  .serach-item {
    text-align: left;
    padding: 10px 15px;
  }
}
// 地图
.map-title {
  font-size: 17px;
  font-weight: 700;
  padding: 10px;
  text-align: left;
}
#allmap {
  width: 100%;
  height: 200px;
  background-color: pink;
}
</style>
